
<template>
  <v-image
    ref="image"
    @transformend="handleTransformEnd"
    :config="{ ...config, image: image }"
  >
  </v-image>
</template>
<script>
import Konva from 'konva';

export default {
  name: 'XGif',
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setImage(this.config.src);
    })
  },
  methods: {
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },

    setImage (src) {

      console.log(src, 'gif-src');

      const canvas = document.createElement("canvas");
      const layer = this.$refs.image.getNode().getLayer();
      console.log(layer)
      function onDrawFrame (ctx, frame) {
        // update canvas size
        canvas.width = frame.width;
        canvas.height = frame.height;
        // update canvas that we are using for Konva.Image
        ctx.drawImage(frame.buffer, 0, 0);
      }
      // eslint-disable-next-line no-undef
      gifler(src).frames(canvas, onDrawFrame);

      this.image = canvas;
      this.animation = new Konva.Animation(() => { }, layer);
      this.animation.start();
    }
  },
  data () {
    return {
      image: null,
      animation: null,
    };
  },
  watch: {
    "config.src": {
      async handler (newSrc) {
        console.log(newSrc, 'newSrc');
        this.$nextTick(() => {
          this.setImage(newSrc);
        })
      }
    }
  }

}
</script>
